<template>
  <div class="as-select"
       ref="asSelect"
       :class="[{'is-disabled':disabled},size?'as-select--'+size:'']"
       @click="disabled?'':showDropdown=!showDropdown"
       @mouseleave="leaveIcon"
       @mouseover="enterIcon"
       @mouseenter="enterIcon">
    <as-input v-model="label"
              :size="size"
              :disabled="disabled"
              :placeholder="placeholder"
              tabindex="-1"
              :isFocus="isFocus"
              :isHover="isHover"></as-input>
    <i class="suffix-icon"
       @click="clearItem"
       :class="value&&showClose?'el-icon-close':'el-icon-arrow-down'"></i>
    <transition name="as-room-to-top">
      <as-select-dropdown v-show="showDropdown"
                          :class="['as-select-dropdown--'+placement]"
                          :size="size">
        <slot></slot>
      </as-select-dropdown>
    </transition>
  </div>
</template>

<script type="text/ecmascript-6">
import emmiter from "../../../mixin";
import AsSelectDropdown from "./select-drop-down";
export default {
  components: { AsSelectDropdown },
  name: "AsSelect",
  mixins: [emmiter],
  props: {
    value: {},
    disabled: Boolean,
    placeholder: String,
    size: String,
    clearable: Boolean,
    placement: { type: String, default: "bottom" }
  },
  watch: {
    model(newVal) {
      this.label = newVal;
      this.broadcast("AsOption", "setValue", this.value);
      this.broadcast("AsOption", "changeHoverItem", this.value);
      this.$emit("change", newVal);
    }
  },
  computed: {
    model: {
      set(val) {
        this.$emit("input", val);
      },
      get() {
        return this.value;
      }
    }
  },
  data() {
    return {
      isHover: false,
      isFocus: false,
      showDropdown: false,
      label: "",
      length: 0,
      showClose: false
    };
  },
  mounted() {
    this.$nextTick(_ => {
      this.broadcast("AsOption", "setValue", this.value);
    });
    this.broadcast("AsOption", "changeHoverItem", this.value);

    window.addEventListener("click", this.blurInput);
    // 响应 click 事件
    this.$on("clickItem", (val, label) => {
      this.label = label;
      this.$emit("input", val);
      this.showDropdown = false;
      this.$nextTick(_ => {
        this.broadcast("AsOption", "setValue", this.value);
      });
    });

    // 改变值后接受值对应的 label
    this.$on("returnLabel", label => {
      this.label = label;
    });

    // hover Item 保留 hover 状态
    this.$on("hoverItem", val => {
      this.broadcast("AsOption", "changeHoverItem", val);
    });
  },
  destroyed() {
    window.removeEventListener("click", this.blurInput);
  },
  methods: {
    clearItem(e) {
      if (this.clearable) {
        e.stopPropagation();
        this.label = "";
        this.$emit("input", "");
      }
    },
    enterIcon() {
      this.isHover = true;
      if (this.clearable) {
        this.showClose = true;
      }
    },
    leaveIcon() {
      this.isHover = false;
      this.showClose = false;
    },
    blurInput(e) {
      let contain = this.$refs.asSelect.contains(e.target);
      this.isFocus = contain;

      if (!contain) {
        this.showDropdown = false;
      }
    }
  }
};
</script>
